<!DOCTYPE html>
<html lang="en">
  <head>
    <title>用户注册</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="./css/style.css">
    <link rel="stylesheet" href="./css/login.css">
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
  </head>
  <body>
    <div id="root">
      <div class="login">
        <div class="content contact">
          <div class="main">
            <div class="header">
              <h2 class="title">用户注册</h2>
              <div class="register" @click="goLogin">用户登录</div>
            </div>
            <el-form ref="form" :rules="rules" :model="form" class="table">
              <el-form-item prop="username">
                <el-input v-model.trim="form.username" placeholder="请输入用户名"></el-input>
              </el-form-item>
              <el-form-item prop="password">
                <el-input v-model.trim="form.password" placeholder="请输入密码"></el-input>
              </el-form-item>
              <el-form-item class="submit">
                <el-button type="primary" @click="onSubmit" style="width:100%">确定</el-button>
              </el-form-item>
            </el-form>
          </div>
        </div>
      </div>
    </div>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.js"></script>
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/blueimp-md5/2.18.0/js/md5.js"></script>
    <script>
      new Vue({
        el: "#root",
        data () {
          return {
            form:{
              username: '',
              password: ''
            },
            rules: {
              username: [
                { required: true, message: '请输入用户名', trigger: 'blur' }
              ],
              password: [
                { required: true, message: '请输入密码', trigger: 'blur' }
              ]
            }
          }
        },
        created () {
          
        },
        methods: {
          onSubmit () {
            this.$refs["form"].validate(valid => {
              if (valid) {
                let password = md5(this.form.password)
                let form = {
                  password,
                  username: this.form.username
                }
                axios.post("/api/register",form).then(res => {
                  if (res.data.code == 200) {
                    this.$message({
                      message: '注册成功',
                      type: 'success'
                    })
                    window.location.href = "/login.html"
                  } else {
                    this.form = this.$options.data().form
                    this.$message.error(res.data.msg)
                  }
                })
              }
            })
          },
          goLogin () {
            window.location.href = "/login.html"
          }
        },
      })
    </script>
  </body>
</html>